查看原文
其他

智能UI:面向未来的UI开发技术

甄子 淘系技术 2021-08-11
随着机器学习和人工智能渗入到各行各业,随着你画我猜、智能推荐、以图搜图、尬舞……渗入生活的方方面面,前端作为编程领域的一支,也必将迎来更多变化和挑战。



前言



近几年来,UI和交互最重要的变化在于如何满足不同人群的需求,下面笔者以简单电路图为例,谈谈如何把UI和交互从“功能”中释放出来,放大至更广阔的领域中,再来看看淘系在前端智能化领域做了哪些实践?


举例来说,虽然我是木耳,但是,偶尔还是会拿有线耳机听一下无损音乐。同事跟我说:你那个耳机手机带不动,要配个耳机放大器。耳机放大器(简称“耳放”)的原理,笼统概括就是把微弱信号变成强劲信号,从而能带动(专业术语是“推”)xx欧姆的耳机。如果把整个耳机看做一个功率耗散元件——电阻,这里xx欧姆就是电阻的阻值。满足耳机功率要求,耳机才能够播放出强劲的低音、丰富的细节、广阔的音场……带给我们身临其境的震撼。


手机上的耳放


要带动上图这个大家伙,手机上插的就是耳放。耳放很复杂,不仅需要提升电流电压,还有音色、降噪、还原……等DSP(数字信号处理)能力。不过,我们可以像把耳机近似成电阻一样(耳机的功率xx欧姆),把整个耳放近似成一个三极管。




上图左边是三极管的元件符号,右边是功放(耳机功放的“功放”)电路图。如果我们事先在三极管的基极上加上一个合适的电流(叫做偏置电流,上图中那个电阻 Rb 就是用来提供这个电流的,所以它被叫做基极偏置电阻),那么当一个小信号跟这个偏置电流叠加在一起时,小信号就会导致基极电流的变化,而基极电流的变化,就会被放大并在集电极上输出。如果这里的偏执电流Rb是手机输出的音频信号,在集电极上输出的就是放大后的信号了。




如果换个角度看这个放大电路,我们可以把偏执电流类比为用户需求,把输入电源类比为产品设计(包含视觉和交互设计及技术方案等),把前端技术类比为三极管,把集电极输出类比为UI和交互(最终的交付物)。


首先,不论用户需求是用户提出的、产品YY的还是老板拍的,在最初提出的那一刻都模糊而粗糙。根据这些原始粗糙的想法,通过产品设计和前端开发,最终才能在用户面前呈现强劲的低音、丰富的细节、广阔的音场……带给用户身临其境的震撼。


其次,三极管——前端开发是放大电路的心脏,三极管从截止区(未进入工作状态)末端到饱和区(超负荷)开端的范围:工作区,直接决定了三极管的放大倍数。就像用不同的前端技术方案去实现需求,技术方案的先进性和合理性,直接决定了最终交付的UI和交互质量,进而影响用户体验。


最后,具体如何理解放大需求呢?放大需求是相对于满足需求而言的。中国有句古话叫:饱暖思淫欲。“饱暖”是人的基本生理需求,相当于满足需求。“思淫欲”是人的高级需求,有人可能会问:这不是生理需求么?那叫“繁殖”。


举个例子,在相机出现之前,绘画的目的主要是记录,记录人物、事件……等等。相机的出现,让记录这件事变得简单高效,绘画得以从繁重的记录工作中释放出来,从而追求艺术性。这就相当于,照相技术本质上放大了绘画的价值——艺术性。


今天,耳放技术可以推xx欧姆的高级耳机,把手机从音频播放的听个响、打电话等基本需求中释放出来,放大至“唯美的音乐”、“震撼的视频临场感”……那么,前端技术应该如何把UI和交互从“功能”中释放出来,放大至更广阔的领域呢?接下来谈谈我的一些愚见。



基础 UI 和交互




Macintosh 桌面



System 6, 1988



System 7.5.3, 1991



MacOS 8.1, 1997



MacOS 9, 1999


Mac OS一直深受其用户的赞誉,它的很多设计都成为了其它软件和系统所模仿和借鉴的对象,对全世界人机界面及其相关行业的影响极其深远。在诸多版本的Mac OS中,MacOS 9及以前的Mac操作系统通常被称为古典系统(Classic OS),从2000年开始,Mac OS进入了全新的Mac OS X时代。


我认为,在进入Mac OS X之前,Apple着重在打造一套完善的基础UI和交互系统。这就像照相技术出现前的绘画一样,先去满足人们的基本需求:记录。


搞UI的都应该听说过Fitts’ Law-鼠标光标指向某一物体的时间,受物体大小和光标距离其远近这两个因素所决定。位于顶部的菜单栏其实是对Fitts’ Law的灵活运用:由于光标不会跑到屏幕外面去,因此你尽可以随便把鼠标往上甩,光标肯定位于菜单栏上,这降低了光标指向的难度。


然而时过境迁,在大屏幕、多显示器越来越普及的今天,这个设计逐渐受到了挑战:在某些极端的情况下(比如主窗口位于最右面的显示器上),用户不得不移动鼠标横跨数台显示器、几千个像素去操作菜单。



被技术放大的UI和交互



▐  Apple Quartz Extreme 放大器


2000年5月10日这天的apple.com


在Jobs第一次公开介绍Mac OS X的用户界面时,他宣称不仅要做出一个高可用性的用户界面,更重要的是,Mac OS X将具备一个名为AQUA的“Dream User Interface”。AQUA一方面保留有古典系统高度易用的特点;另一方面,通过各种视觉特效的引入,AQUA将带来前所未有的用户体验。



Mac OS X Public Beta, 2000



Mac OS X 10.0 Cheetah, 2001



Mac OS X 10.1 Puma, 2001



Mac OS X 10.2 Jaguar, 2002


从上图可见,从 Jaguar 开始拉丝金属已经得到广泛的应用。由于 Quartz Extreme 这项被简称为QE的新技术给UI设计带来了新的可能性。简单地说,它就是利用了显卡的强劲性能,为UI提供硬件加速。这样进一步解除了机器性能对UI设计的限制,设计师可以充分发挥自己的创造力。由此可见,想要产出或保持一个高水平的UI设计,先进的底层技术是重要基础。


▐  Apple Core Animation放大器


Core Animation是一个面向程序员的动画开发框架,它旨在统一、规范并简化程序员在UI设计上的编码工作,并通过提供一系列预定义好的API,让开发者可以轻松地实现各种视觉特效。


Core Animation把UI设计向前推进了一大步,是它加速了直接操纵(Direct Manipulation)这种交互方式的普及。在10.5中,它作为一个重要的基础框架被提出,奠定了未来几年Apple在其各个产品上UI设计的基础。我们目前常见的最典型的应用就是iPhone,可以说,Core Animation是iPhone易用且绚烂多姿的UI的最大功臣。


下面是此技术在iPhone上的几个直接操纵的例子:







被技术放大的UI和交互,基本实现了Jobs:不仅要作出一个高可用性的用户界面,更重要的是,Mac OS X将具备一个名为AQUA的“Dream User Interface”之愿景。AQUA一方面保留有古典系统高度易用的特点;另一方面,通过各种视觉特效的引入,AQUA将带来前所未有的用户体验。


在近几年的拟物、扁平、分层……等设计风格的小幅变化外,UI和交互最重要的变化就在于:如何满足不同人群的需求。过去,对于一个视力不好的人,会外挂辅助功能来解决:放大镜。如今,对于一个视力不好的人,手机淘宝利用智能UI这个牛逼的放大器,直接从UI和交互上来解决。




智能UI:一枚牛逼的放大器



▐  理论依据


先看一个UGD(User Growth Design)的例子:



UGD这个思想,试图回答:什么样的设计能够驱动增长?就像当初UCD(User Center Design),试图回答:什么样的设计能够改善用户体验?然而,他们都忽略了一个问题:一万个人眼里有一万个哈姆雷特。假如把上面这些问题变成:什么样的设计能够驱动什么类型用户增长?什么样的设计能够改善什么类型用户的体验?我们就给一万个类型的人,每类提供一万种类型的UI和交互,再根据用户的行为数据判断每类用户喜欢那种类型的UI和交互,就能解决一万个人眼里有一万个哈姆雷特的问题。


▐  实现方法


业务可变性方案


业务可变性方案需要和业务确认允许变化的范围和选项。比如,业务上有一个弹窗,如果业务需要中断用户当前操作流程,可变性就从“用弹窗还是浮层”问题降级到“必须用弹窗”,这和产品设计、UI和交互设计无关。


假如业务允许在“用弹窗还是浮层”问题上做选择呢?一般来说,设计会介入和产品一起判断“用弹窗还是用浮层”,最后,还是拿着一个弹窗一个浮层两套方案,去找老板拍板。我们智能UI的做法却不同,两套方案都实现,根据不同类型用户在两套方案上的数据表现,分别给用户呈现不同的方案。


设计可变性方案


设计可变性方案需要和设计确认:不同类型用户可能在UI和交互上的差异(如视弱、冷淡、二次元……),并根据这些差异输出不同的设计方案。这里的设计方案主要由三部分构成:页面、模块、组件,很熟悉是不?《前端智能化》里有介绍我们针对页面构成的原理,如何设计智能生成页面代码的体系,如今 imgcook.com 已经在组件识别上取得了较大的进步。我们可以用组件去对应设计中Symbol,例如 material design 的Components:



通过不同的页面布局、模块布局、模块内布局,并组合不同样式的组件,最终给每类用户呈现出他们喜爱的UI、提供他们最舒服的交互方式。


技术可变性方案


在网页出现的第一天,模板技术就几乎同时出现了,她的核心任务是静态的框架呈现动态的内容。模板像一个杯子,倒进去水,喝完了,再倒进去果汁,杯子还是那个杯子。而智能UI要求的是,一个茶杯,倒进去水,喝完了,拿个玻璃杯,倒进去果汁。模板自身也在变化,就是第一代智能UI的技术可变性方案。


在经历痛苦的模板配置后,第二代智能UI会根据设计系统的约束、设计美学算法模型打分、分人群优秀模板的机器学习等手段,用组件、模块自动化且智能的进行模板的生成。


事实上,如果粗略算一下:100人群风格 x 30组件元素 (平均每个页面用到的组件个数),即便模块和模板页面都可以自动生成,也有3000个组件需要开发,这庞大的开发工作量需要全新的开发方式来解决。



imgcook:一个大功率电源





为了能够给智能UI提供充分的组件生成和供给能力,我们对 imgcook.com 进行了升级,支持多态的组件生成能力:




当然,对于 imgcook 上生成交互逻辑、业务逻辑代码,以及数据字段的自动化绑定能力,都是保留和继承的。我认为简单的UI和交互,未来都可以业务级完整交付,辅之以机器视觉加持的自动化测试能力,甚至可以做到自动化上线。



写在最后



Alan Kay说:用技术去放大人们的需求。就像照相技术放大了绘画的艺术性一样,智能UI技术放大了UI和交互的个性化,imgcook 放大了什么?对于接触编程30年、做前端16年的我来说,一直对前端被称为“切图仔”这件事儿深恶痛绝。在整个技术领域,待过腾讯和阿里的我,深感前端缺乏技术含量而被歧视的痛苦。imgcook 不仅能把前端“施工队”这个称号甩给机器学习和人工智能,我提出并坚持了三年多的“前端智能化”方向,也逐渐在众多领域里开花结果。如果你使用VSCode的imgcook插件,我们的Code2Code前端智能化方向代码纠错能力,能够帮助你智能提醒、自动推荐前端代码,还在 BFF(Backend For Front-end)胶水层代码生成上积极探索:Service2Code。


淘系技术部-频道与D2C智能团队


我们开源了:http://github.com/alibaba/pipcook 带给前端机器学习的能力,提供了 http://imgcook.com 开放平台带给前端设计稿生成代码的能力,未来,我们还会带来更多前端智能化实践。

如果你希望加入前端智能化方向,共同定义前端智能化的未来,欢迎与我交流:zhenyankun.zyk@alibaba-inc.com


✿  拓展阅读


作者|甄焱鲲(甄子)

编辑|橙子君

出品|阿里巴巴新零售淘系技术


    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存